<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card">
        <el-descriptions>
          <div v-show="courseInfo.name" slot="title">课程名称：{{ courseInfo.name }}</div>
          <el-descriptions-item label="课程科目">{{ courseInfo.subject }}</el-descriptions-item>
          <el-descriptions-item label="课程状态">{{ typeFormat(courseInfo.status) }}</el-descriptions-item>
          <el-descriptions-item label="课程价格">{{ courseInfo.price }}</el-descriptions-item>
          <el-descriptions-item label="教师姓名">{{ typeFormat(otherInfo.lecturer_id) }}</el-descriptions-item>
          <el-descriptions-item label="网课班级">{{ typeFormat(otherInfo.online_class_id) }}</el-descriptions-item>
          <el-descriptions-item label="课程效期">{{ otherInfo.term_of_validity }}年</el-descriptions-item>
          <el-descriptions-item label="适用地区">{{ otherInfo.province }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ info.createdAt && parseTime(info.createdAt) }}</el-descriptions-item>
          <el-descriptions-item label="课程简介">{{ courseInfo.introduction }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="box-card">
        <div v-for="(item,index) in chapterInfo" :key="index">
          <h4>{{ item.name }}</h4>
          <el-table :data="item.children" border>
            <el-table-column
              type="index"
              header-align="center"
              width="50"
              label="序号"
              align="center"
            />
            <el-table-column prop="name" align="center" label="子章节名称" />
            <el-table-column prop="url_name" align="center" label="课件名称" />
            <el-table-column prop="is_contain_exercise" align="center" label="章节习题">
              <template slot-scope="scope">
                <span>{{ scope.row.is_contain_exercise? scope.row.is_contain_exercise:'-' }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
<!--                <span>下载</span>-->
<!--                <el-button size="samll" type="primary">下载</el-button>-->
                <el-button type="primary" size="small" @click="toDownLoad(scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import { getDetails, classList } from '@/api/admin/sys-course'
import { getLeacher } from '@/api/admin/sys-teacher'
export default {
  data() {
    return {
      info: {},
      courseId: null,
      courseInfo: {},
      otherInfo: {},
      chapterInfo: [],
      statusOptions: [
        { label: '上架', value: 1 },
        { label: '下架', value: -1 }
      ]
    }
  },
  created() {
    this.courseId = this.$route.params && Number(this.$route.params.id)
    getDetails(this.courseId).then(response => {
      const { data = {}} = response
      this.info = data
      this.courseInfo = data?.step1 || {}
      this.otherInfo = data?.step2 || {}
      this.chapterInfo = data?.course_ware_json || []
    })
    getLeacher().then(res => {
      res?.data?.forEach(item => {
        this.statusOptions.push({
          label: item.name,
          value: item.id
        })
      })
    })
    classList({ class_type: '网课' }).then(res => {
      res?.data?.forEach(item => {
        this.statusOptions.push({
          label: item.name,
          value: item.id
        })
      })
    })
  },
  methods: {
    toDownLoad(row){
      window.open(row.url)
      // this.handleDownlsoad(row.url,row.name)
    },
    // 浏览器下载
    handleDownload(url,name) {
        fetch(url)
        .then(res => res.blob())
        .then(blob => {
          const a = document.createElement("a");
          const objectUrl = window.URL.createObjectURL(blob);
          a.download = name;
          a.href = objectUrl;
          a.click();
          window.URL.revokeObjectURL(objectUrl);
          a.remove();
        })
    },
    // 参数系统内置字典翻译
    typeFormat(status, column) {
      return this.selectDictLabel(this.statusOptions, status)
    }
  }
}
</script>
